<template>
      <div class="top_title" style="background:white;width: 100%;height: 50px; border-radius: 10px;">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
        >
          <el-menu-item index="1">邀请回答</el-menu-item>
          <el-menu-item index="2">为你推荐</el-menu-item>
          <el-menu-item index="3" >最新问题</el-menu-item>
          <el-menu-item index="4">擅长话题</el-menu-item>
          <span style="display: inline-flex; align-items: center;position: absolute;right: 30px;top: 20px">
          <svg width="18" height="18" viewBox="0 0 24 25" class="Zi Zi--AddManagement" fill="currentColor">
            <path d="M4 5.487a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75ZM4 12.487a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75ZM4.75 18.737a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5ZM17 20.487a.75.75 0 0 1-.75-.75v-3.25H13a.75.75 0 0 1 0-1.5h3.25v-3.25a.75.75 0 0 1 1.5 0v3.25H21a.75.75 0 1 1 0 1.5h-3.25v3.25a.75.75 0 0 1-.75.75Z">          </path>
          </svg>
            擅长领域
        </span>
        </el-menu>
      </div>

      <div  style="background:white;width: 100%;height: 500px; ">
        <div style="margin:5px auto;width: 98%;height: 50px;border-bottom: #d2d1d1 solid 1px">
          <el-row style="line-height: 50px">
            <el-col :span="10">问题</el-col>
            <el-col :span="8" style="padding-left: 30px">邀请用户</el-col>
            <el-col :span="6" style="text-align: center">操作</el-col>
          </el-row>
        </div>

        <div style="margin:0 auto;width: 98%;height: auto">
          <el-row v-for="item in 10"  style="line-height: 150px;">
            <el-col  :span="10">{{question.title}}</el-col>
            <el-col :span="8" style="padding-left: 30px">
              <el-raveter>
                <el-avatar :size="50" :src="circleUrl" />
              </el-raveter>
              {{question.authorname}}邀你回答
            </el-col>
            <el-col :span="6" style="text-align: center">写回答</el-col>
          </el-row>
        </div>
      </div>

</template>

<script setup>
import { reactive } from "vue";

const state = reactive({
  circleUrl:
      'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})
const   question= reactive({
  title:'文笔挑战 “我打碎了夕阳，___”下一句你怎么接',
  authorname:'曾祥轩',

})

</script>

<style scoped>
.top_title{
  border-radius: 20px;
  margin-bottom: 5px;
  border-radius: 10px;
  padding:0px;

}
</style>